import { Box, Link, Typography } from '@mui/material';
import { connectWalletDialog } from 'components/shared/dialogs';
import Web3Manager from 'libs/web3-manager';
import { useRouter } from 'next/router';
import * as React from 'react';

import { AuthenticationType } from '../../api/authentication/authentication';
import AuthenticationManager from '../../api/authentication/authentication-manager';
import { GFSButton } from '../../components/shared/button/gfs-button';
import { BRANDING } from '../../constants/branding';
import Routes from '../../constants/routes';

const ConnectWalletPage = () => {
    const icons = [
        {
            icon: 'telegram',
            link: 'https://t.me/xldtoken'
        },
        {
            icon: 'twitter',
            link: 'https://twitter.com/OmniX_finance'
        },
        {
            icon: 'medium',
            link: 'https://xld.medium.com/'
        },
        {
            icon: 'linkedin',
            link: 'https://www.linkedin.com/company/xld'
        },
        {
            icon: 'discord',
            link: 'https://discord.com/invite/xldfinance'
        }
    ];
    const router = useRouter();

    const onClick = async () => {
        connectWalletDialog({ open: true });
        if (await Web3Manager.connect()) {
            connectWalletDialog({ open: false });

            const valid = await AuthenticationManager.isValid();

            if (valid === AuthenticationType.NOT_AUTHORIZED) {
                await router.push(Routes.OTP);
            }
            if (valid === AuthenticationType.VALID) {
                await router.push(Routes.HOME);
            }
            if (valid === AuthenticationType.NOT_WHITELISTED) {
                await router.push(Routes.WRONG_WALLET);
            }
        } else {
            connectWalletDialog({ open: false });
        }
    };
    return (
        <>
            <style jsx global>{`
                .container-galaxy {
                    height: calc(100vh);
                    background-image: url(/landingpage_bg.png);
                    background-size: cover;
                }

                .content-wrapper {
                    position: relative;
                    padding: 50px 96px 110px;
                    width: 100%;
                    height: 100%;
                }
                .content {
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    height: 100%;
                }
                .icon-wrapper {
                    flex: 1;
                    display: flex;
                    align-items: flex-end;
                    padding-top: 20px;
                }
                .icon {
                    width: 24px;
                    height: 24px;
                    margin-right: 32px;
                    cursor: pointer;
                }
                .header-wrapper {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;
                }
                .logo-text {
                    padding-bottom: 150px;
                }

                @media screen and (max-width: 425px) {
                    .logo-text {
                        padding-bottom: 0;
                    }
                    .content-wrapper {
                        padding: 60px;
                    }
                }
            `}</style>

            <Box className={'container-galaxy'}>
                <Box className={'content-wrapper'}>
                    <Box className={'content'}>
                        <Box className={'header-wrapper'}>
                            <Typography
                                className={'logo-text'}
                                sx={{
                                    fontWeight: '600',
                                    fontSize: '32px',
                                    lineHeight: '60px',
                                    color: '#FFFFFF'
                                }}
                            >
                                {BRANDING.NAME}
                            </Typography>
                            <Box display={'flex'} lineHeight={'60px'}>
                                <Typography
                                    variant={'h5'}
                                    sx={{ fontWeight: 400 }}
                                    mr={'4px'}
                                    lineHeight={'60px'}
                                >
                                    Powered by
                                </Typography>
                                <Typography variant={'h5'} lineHeight={'60px'}>
                                    XLD Finance
                                </Typography>
                            </Box>
                        </Box>
                        <Typography
                            sx={{
                                fontWeight: '600',
                                fontSize: '72px',
                                lineHeight: '133.5%',
                                width: '700px',
                                color: '#FFA800',
                                paddingBottom: '16px',
                                ['@media (max-width:992px)']: {
                                    width: 'auto'
                                }
                            }}
                        >
                            Manage your guild easily.
                        </Typography>
                        <Typography
                            sx={{
                                fontWeight: '300',
                                fontSize: '24px',
                                lineHeight: '165%',
                                color: '#FFFFFF',
                                paddingBottom: '32px'
                            }}
                        >
                            The next generation of gaming is here.
                        </Typography>
                        <GFSButton
                            sx={{
                                fontWeight: '500',
                                fontSize: '24px',
                                lineHeight: '25px',
                                width: '260px',
                                height: '60px',
                                padding: '20px',
                                '&:hover': {
                                    boxShadow: 'none !important'
                                }
                            }}
                            onClick={onClick}
                        >
                            Connect Wallet
                        </GFSButton>
                        <Box className={'icon-wrapper'}>
                            {icons.map(({ icon, link }) => (
                                <Link href={link} target={'_blank'} key={link}>
                                    <Box
                                        component="img"
                                        className={'icon'}
                                        alt="Icon"
                                        src={`/${icon}.svg`}
                                    />
                                </Link>
                            ))}
                        </Box>
                    </Box>
                </Box>
            </Box>
        </>
    );
};

export default ConnectWalletPage;
